{extend name="public/base" /}
{block name="head"}
  <script type="text/javascript" src="//cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  <style type="text/css">
    #particles-js{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;z-index: -9;}
    .login_box{position: absolute;width: 300px;height: 220px;top:50%;left:50%;margin-top: -200px;margin-left: -150px;border-radius: 3px;opacity: 0.8;background-color: #fff;}
    .login_box .layui-form-item{width: 90%;}
    .login_box h2{text-align: center;font-size: 32px;}
    .beg-login-bg{;background-color: #efefef;}
    .layui-input-block{margin-left: 0px;}
    .captcha_img{position: absolute;top: 0px;right: 0px;}
  </style>
{/block}
{block name="body"}
  <div class="login_box">
    <form class="layui-form" method="post" action="{:Url('dologin')}">
      <div class="layui-form-item">
        <h2>管理后台</h2>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <input type="password" name="password" lay-verify="required" placeholder="请输入密码" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <input type="text" name="checkcode" lay-verify="required" placeholder="验证码" class="layui-input">
          <span class="captcha_img">{:captcha_img()}</span>
        </div>
        <span style="color:red;padding-top: 5px;display: inline-block;">演示账号:demo,密码vadmin</span>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
        </div>

      </div>
    </form>
  </div>
  <div id="particles-js"></div>

  
  <script>
    layui.use(['layer', 'form'], function() {
      var layer = layui.layer,
      $ = layui.jquery,
      form = layui.form();
        
      form.on('submit(formDemo)',function(data){
        $.post("{:Url('dologin')}",data.field,function(res){
          if(res.status == 200){
            layer.msg("登录成功！");
            window.setTimeout(function(){
              window.location.href = "{:Url('/admin')}";
            },800);
          }else{
            layer.msg(res.msg);
          }
        });
        return false;
      });
    });
  </script>


  <script type="text/javascript">


particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#666"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#666666",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});


  $(".captcha_img").click(function(){
    $(this).find("img").attr("src","{:Url('/captcha')}");
  });
  </script>

{/block}